<!doctype html>
<html lang="zh-CN" xmlns="">
<head>
    {% load static %}
	<meta charset="UTF-8">
	<title>昌航有物：商品详情</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href={% static "css/reset-u.css" %}>
    <link rel="stylesheet" href={% static "css/standby.css" %}>
    <link rel="stylesheet" href={% static "css/swiper.min.css" %}>
    <script src={% static "js/jquery.min.js" %} ></script>
    <script type="text/javascript" src="{% static 'tinymce/jquery.tinymce.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'tinymce/tinymce.min.js' %}"></script>
    <style>
        .head {
            background: #e4abc2;
        }
        .Libian{
            font-size: x-large!important;
            text-align: center;
            margin: 0 auto;
            color: white;
            font-family: "Libian SC", serif
        }
        .back{
            position: absolute;
            font-size: large!important;
            margin-top: 4%;
            margin-left: 2%;
        }
        .shop-go a {
            border: 1px solid  #fb6b97;
            color: #fb6b97;
        }
        .swiper-pagination-bullet-active {
            opacity: 1;
            background: #fb6b97;
        }
        .pro-title div.info strong {
            vertical-align: sub;
            font-size: 16px;
            color: #fb6b97;
            font-weight: bold;
        }
        .footr-nav div.text-box a:first-child {
            width: 47%;
            background: #afd1d7;
        }
        .footr-nav div.text-box a:last-child {
            width: 44%;
            background: #e4abc2;
        }
    </style>
</head>
<script>
    $(function () {
        $(".back").click(function () {
            window.history.go(-1); //返回上一页
        });
    })
</script>
<body>
	<section class="head">
        <p class="back Libian">< 返回</p>
		<h1 class="Libian">详情</h1>
		<a class="more" href="javascript:void(0);"><i class="iconfont icon-fenxiang"></i></a>
	</section>
	<section class="banner white e5e5e5 ">
		<div class="swiper-container">
			<div class="swiper-wrapper pb30">
				<div class="swiper-slide">
					<div class="p0">
						<img class="box-shadow pic1" src="" alt="show" title="show">
					</div>
				</div>
				<div class="swiper-slide">
					<div class="p0">
						<img class="box-shadow pic2" src="" alt="show" title="show">
					</div>
				</div>
				<div class="swiper-slide">
					<div class="p0 info">
						<img class="box-shadow pic3" src="" alt="show" title="show">
					</div>
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
	</section>
    <div id="app">
	<section class="pb20 white">
		<div class="pro-title plr10">
			<div class="info">
				<p class="text-ell2 mb5">[[info.title]]</p>
				<div class="clearfix">
					<strong>¥ [[info.price]]</strong>
					<a class="pull-right mr10" href="javascript:void(0);"><i class="iconfont icon-shoucangkongxin mr5"></i><span>收藏</span></a>
				</div>
			</div>
			<div class="number">
				<p class="text-ell">点击数：<span>[[info.click_num]]</span></p>
				<p class="text-ell">收藏数：<span>[[info.like_num]]</span></p>
				<p class="text-ell">地点：<span>[[info.place]]</span></p>
			</div>
		</div>
	</section>
	<section class="white mt5 mb60">
		{% comment %}<div class="plr10 show choice-box" onclick="code.open(this);">
			<a href="javascript:void(0);"><span>请选择商品规格及数量</span><i class="iconfont icon-youjianhao pull-right"></i></a>
		</div>{% endcomment %}
		<div class="">
			<div class="dis-flex align-c mtb20">
				<div class="shop-logo">
					<img :src="info.avatar" alt="头像" title="头像">
				</div>
				<div class="show flex1 shop-info">
					<strong class="text-ell">[[info.seller]]</strong>
					<p class="text-ell">全部宝贝：<span>[[info.num]]</span>件</p>
				</div>
			</div>
			<div class="dis-flex shop-go" >
				<a href="javascript:void(0);">查看全部商品</a><a href="javascript:void(0);">个人主页</a>
			</div>
		<div class="img-title">
			<strong>简介</strong>
		</div>
		<div>
            <p v-html="info.intro"></p><br><br>
		</div>
        </div>
    </section><br>
	<section class="footr-nav">
		<div class="white">
			<div class="icon-box">
                <a  href={% url 'main:cart' %}><i class="iconfont icon-gouwuche"></i></a>
                <a  href={% url 'main:mine' %}><i href="{% url 'main:mine' %}" class="iconfont icon-gerenzhongxin"></i></a>
			</div>
			<div class="text-box">
				<a href="javascript:void(0);"><span>加入购物车</span></a>
				<a href="javascript:void(0);"><span>立即购买</span></a>
			</div>
		</div>
	</section>
	{% comment %}<section class="mask" onclick="code.close(this)">
		<div class="main-bottom">
			<div class="main-title dis-flex">
				<div class="imgs">
					<img src="" alt="产品展示" title="产品展示">
				</div>
				<div class="text">
					<p class="text-ell">商品价格：<strong>¥299</strong></p>
					<p class="text-ell">商品库存：<span>100</span></p>
					<p class="text-ell">请选择商品规格</p>
				</div>
			</div>
			<div class="main-info">
				<strong>颜色</strong>
				<div class="dis-flex colors">
					<div class="active"><span>红色</span></div>
					<div><span>蓝色</span></div>
					<div><span>粉红色</span></div>
				</div>
				<div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
				</div>
				<div class="main-number dis-flex">
					<div class="flex1">
						<strong>数量</strong>
					</div>
					<div>
						<i>-</i>
                        <label>
                            <input type="text" value="0" readonly>
                        </label>
                        <i data-number="up">+</i>
					</div>
				</div>
			</div>
			<div  class="main-btn">
				<input type="submit">
			</div>
			<div class="close" onclick="code.close(this);"><i class="iconfont icon-close"></i></div>
		</div>
	</section>{% endcomment %}

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src={% static "js/vue.js" %}></script>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!--<script src="static/js/vue.min.js"></script>-->
    <script src={% static "js/swiper.min.js" %} ></script>
    <script src={% static "js/common.js" %} ></script>
</div>
</body>
<script>
    var app = new Vue({
          delimiters:['[[',']]'],
          data: {
              info:null,
          },
        mounted:function () {
                var that = this;
                $.ajax({
                    url:'{% url 'goods:info' %}',
                    type:'GET',
                    data:{
                        'id':{{ id }}
                    },
                    dateType:'json'
                }).done(function (res) {
                    that.info = res;
                    var pic1 = res.pic1;
                    var pic2 = res.pic2;
                    var pic3 = res.pic3;
                    $(".pic1").attr('src',pic1);
                    $(".pic2").attr('src',pic2);
                    $(".pic3").attr('src',pic3);

                //    以此类推
                }).fail(function () {
                    alert('error');
                    console.log("请求失败")
                })
            }
        }).$mount('#app')
</script>
</html>
